<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true">
      <el-row>
        <el-col :span="20">
          <el-form-item>
            <el-input v-model="searchForm.fuzzy" style="width:200px" placeholder="设备编号/名称" clearable @keyup.enter.native="handleSearch" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.deviceClass" clearable style="width:150px" filterable placeholder="设备类别">
              <el-option value="1" label="温湿度计">温湿度计</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <treeselect
              style="width:150px"
              v-model="positionTwo"
              :options="locationArray"
              :normalizer="normalizerTwo"
              placeholder="监测位置"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="iconfont icon-chaxun1" @click="handleSearch"> 查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" class="search-right">
          <el-button type="text" icon="el-icon-download" @click="appearLog">监测记录下载</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      border
      :data="surveyNoteData"
      stripe
      highlight-current-row
      :header-cell-style="{background:'#ECF3FC'}"
    >
      <el-table-column type="index" width="50" label="序号" align="center" />
      <el-table-column prop="deviceCode" label="设备编号" width="160px" align="center" />
      <el-table-column prop="deviceName" label="设备名称" width="160px" align="center" />
      <el-table-column prop="deviceClass" label="设备类别" align="center">
        <template slot-scope="{row}">
          <span v-if="row.deviceClass === '1'">温湿度计</span>
        </template>
      </el-table-column>
      <el-table-column prop="monitorLocationName" label="监测位置" width="140px" align="center" />
      <el-table-column prop="instrumentModel" label="设备型号" width="140px" align="center" />
      <el-table-column prop="jcsj" label="监测时间" width="160px" align="center">
        <template slot-scope="{row}">
          <span>{{row.surveyDate}}&nbsp;{{row.surveyTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="temperature" label="温度(°C)" align="center" />
      <el-table-column prop="humidity" label="湿度(%rh)" align="center" />
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="seeAppear(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"/>
    </div>

    <!-- 记录下载 -->
    <el-dialog title="记录下载" :visible.sync="appearLogVisible" center width="25%" :close-on-click-modal="false">
      <el-form :model="appearLogForm" :inline="true">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择记录日期:">
              <el-date-picker v-model="appearLogForm.startTime" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" style="width: 47%;"/>&nbsp;-
              <el-date-picker v-model="appearLogForm.endTime" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" style="width: 47%;"/>&nbsp;&nbsp;
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: -15px;">
        <el-button @click="appearLogVisible=false">取消</el-button>
        <el-button type="primary" @click="exportAppearLog">确认</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog title="查看温湿度" :visible.sync="seeAppearVisible" center width="26%" :close-on-click-modal="false">
      <div>
        <el-form :model="seeAppearForm" label-width="90px">
          <el-row>
            <el-col :span="11">
              <el-form-item prop="temperature" label="温度:">
                <span style="font-weight: bold;">{{seeAppearForm.temperature}}</span>&nbsp;°C
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="humidity" label="湿度:">
                <span style="font-weight: bold;">{{seeAppearForm.humidity}}</span>&nbsp;%rh
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item prop="surveyDate" label="日期:">
                <span style="font-weight: bold;">{{seeAppearForm.surveyDate}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item prop="surveyTime" label="时间:">
                <span style="font-weight: bold;">{{seeAppearForm.surveyTime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: -30px;float: right;">
        <el-button @click="seeAppearVisible=false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import * as ambientServer from '@/api/ambient'
import * as instrServer from '@/api/instrument'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Pagination,Treeselect },
  data() {
    return {
      searchForm: {
        fuzzy: '',
        deviceCode: '',
        deviceName: '',
        deviceClass: '',
        monitorLocation: '',
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,
      surveyNoteData: [],
      locationArray: [],
      appearLogVisible: false,
      appearLogForm: {
        startTime: '',
        endTime: ''
      },
      seeAppearVisible: false,
      seeAppearForm: {
        temperature: '',
        humidity: '',
        surveyDate: '',
        surveyTime: ''
      },
      positionTwo: null,
    }
  },
  created() {
    this.handleSearch()
    this.getsLocation()
  },
  methods: {
    handleSearch() {
      this.searchForm.monitorLocation = this.positionTwo
      ambientServer.seesAmbientSurveyNote(this.searchForm).then(res => {
        if (res.code === 200 && res.result) {
          this.surveyNoteData = res.result.records || []
          this.total = res.result.total
        }
      })
    },

    // 监测位置列表
    getsLocation() {
      instrServer.roomList().then(res => {
        this.locationArray = res.result;
      });
    },

    // 转换数据结构
    normalizerTwo(node) {
      if (node.childList && !node.childList.length) {
        delete node.childList;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childList
      };
    },

    // 下载监测记录弹框
    appearLog() {
      if (this.surveyNoteData.length === 0){
          this.$message.warning("至少有一条监测记录的数据，才能进行下载操作！");
          return;
      }
      this.appearLogForm = {
        startTime: '',
        endTime: ''
      };
      this.appearLogVisible = true
    },

    // 下载监测记录
    exportAppearLog() {
      var url = '/api/ambient/exportSurvey?startTime=' + this.appearLogForm.startTime + '&endTime=' + this.appearLogForm.endTime
      window.open(url)
    },

    // 查看
    seeAppear(row) {
      this.seeAppearForm.temperature = row.temperature
      this.seeAppearForm.humidity = row.humidity
      this.seeAppearForm.surveyDate = row.surveyDate
      this.seeAppearForm.surveyTime = row.surveyTime
      this.seeAppearVisible = true
    },

  }
}
</script>

<style scoped lang="scss" type="text/scss">
.search_div {
  >div {
    &:nth-child(1){
      margin-right: 10px;
    }
    display: inline-block;
  }
}
.search_input {
  width: 200px;
  margin-bottom: 5px;
}
.search-right {
  text-align: right;
  padding-right: 25px;
}
.item {
  font-size: 16px;
}
::v-deep .el-card .el-card__header {
  padding: 5px 20px;
  background: #F3F2F2;
}
.apostrophe{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
